@import "./mixin";
.office {
    width: 100%;
    height: 900px;
    .office-edition {
        height: 900px;
        .office-top {
            width: 100%;
            height: 38px;
            margin-bottom: 20px;
            p {
                width: 100%;
                height: 38px;
                font-size: 24px;
                color: #000;
            }
        }
        .office-img {
            width: 100%;
            height: 398px;
            margin-bottom: 30px;
            ._left {
                float: left;
                width: 892px;
                height: 100%;
            }
            ._right {
                float: right;
                width: 282px;
                height: 398px;
                text-align: center;
                ._right-top {
                    width: 100%;
                    height: 220px;
                    background-color: #fff;
                    img {
                        width: 220px;
                        height: 220px;
                    }
                }
                ._right-bottom {
                    width: 100%;
                    height: 178px;
                    text-align: center;
                    border-top: 1px solid opacify($color: #FFF, $amount: 0);
                    p:nth-of-type(1) {
                        height: 50px;
                        line-height: 24px;
                        color: #3A3D3F;
                        font-size: 18px;
                        font-weight: 700;
                        margin: 18px 0 0;
                    }
                    p:nth-of-type(2) {
                        width: 234px;
                        height: 50px;
                        margin: 6px 0 0;
                    }
                    p:nth-of-type(3) {
                        width: 234px;
                        height: 32px;
                        font-weight: 700;
                        color: #e03531;
                        margin: 6px 0 0;
                        span {
                            font-size: 24px;
                        }
                    }
                }
            }
        }
        .office-bottom {
            display: flex;
            width: 100%;
            height: 398px;
            .item {
                flex: 1;
                width: 282px;
                height: 398px;
                margin-right: 25px;
                ._right-top {
                    width: 100%;
                    height: 220px;
                    text-align: center;
                    background-color: #fff;
                    img {
                        width: 220px;
                        height: 220px;
                    }
                }
                ._right-bottom {
                    width: 100%;
                    height: 178px;
                    text-align: center;
                    border-top: 1px solid opacify($color: #FFF, $amount: 0);
                    p:nth-of-type(1) {
                        height: 50px;
                        line-height: 24px;
                        color: #3A3D3F;
                        font-size: 18px;
                        font-weight: 700;
                        margin: 18px 0 0;
                    }
                    p:nth-of-type(2) {
                        width: 234px;
                        height: 50px;
                        margin: 6px 0 0;
                    }
                    p:nth-of-type(3) {
                        width: 234px;
                        height: 32px;
                        font-weight: 700;
                        color: #e03531;
                        margin: 6px 0 0;
                        span {
                            font-size: 24px;
                        }
                    }
                }
            }
            .item:nth-of-type(4) {
                margin-right: 0;
            }
        }
    }
}